<template>
    <div class="img_url_select_cp">
        <el-image
            v-if="imgUrl"
            fit="cover"
            :src="imgUrl">
            <div slot="error">
                <i class="el-icon-picture-outline"></i>
            </div>
            <div slot="placeholder">
                <i class="el-icon-loading"></i>
            </div>
        </el-image>
        <div class="container">
            <el-input
                type="textarea"
                placeholder="请输入图片链接"
                v-model="imgUrl"
                clearable>
            </el-input>
            <div class="remove_bt" @click="removeUrl">
                <i class="el-icon-delete"></i>
            </div>
        </div>
    </div>
</template>

<script>
//基于vue2 element-ui的图片选择器 （输入图片链接即可）双向数据绑定
export default {
    name:"ImgUrlSelect",
    props:{
        value:{
            type:String,
            default:"",
        },
    },
    computed:{
        imgUrl:{
            get(){
                return this.value;
            },
            set(newValue){
                this.$emit('input',newValue);
            },
        },
    },
    methods:{
        removeUrl(){  //清空链接
            this.imgUrl = "";
        },
    },
}
</script>

<style scoped lang="scss">
.img_url_select_cp{
    width: 100%;
    height: 100%;
    border-radius:2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid #f3f3f3;
    transition: all 0.2s;
    .el-image{
        width: 100%; 
        height: 100%;
        min-height: 50px;
        max-height: 800px;
        border-radius: 0.2rem;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-bottom: 1px solid #f3f3f3;
        i{
            font-size: 3.6rem;
            padding: 1.2rem 0;
        }
    }
    .container{
        width: 100%; 
        display: flex;
        flex-direction: row;
        align-items: stretch;
        text-align: center;
        justify-content: stretch;
        line-height: 1.5;
        height: fit-content;
        >*{
            cursor: pointer;
        }
        /deep/.el-textarea .el-textarea__inner {
            border: none;
        }
        >.remove_bt{
            width:fit-content;
            transition: all 0.2s;
            padding:0 15px;
            display: flex;
            align-items: center;
            border-left: 1px solid #f3f3f3;
            background-color: #f3f3f3;
            i{
                font-weight: bold;
                font-size: 20px;
            }
            &:hover{
                color: #ef3f61;
            }
        }
    }
}
</style>
